<template>
    <div :style="{ height: '100%', width: '100%' }" ref="myEchart" class="china"></div>
</template>
<script>
import * as echarts from "echarts";
import chinaMap from "@/assets/map/china.json";
export default {
    name: "china-graph",
    props: ['graphData'],
    data() {
        return {
            chart: null,
            data: []
        };
    },
    mounted() {
    },
    watch: {
        graphData(n, _o) {
            this.data = n
            this.$nextTick(() => {
                this.getEcharts();
            });
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        getEcharts() {
            //注册地图到echarts中  这里的 "china" 要与地图数据的option中的geo中的map对应
            echarts.registerMap("china", { geoJSON: chinaMap });

            //这里是为了获得容器所在位置    
            let myChart = echarts.init(this.$refs.myEchart);

            // 过渡---------------------
            myChart.showLoading({
                text: '正在努力的读取数据中...',
            });

            // 进行相关配置
            myChart.setOption({
                animation: true,
                title: {
                },
                tooltip: {
                    backgroundColor: "#fff",
                    formatter: function (params, ticket, callback) {
                        if (params.value) {
                            return params.name + " " + params.value;
                        }
                        return params.name
                    }
                },
                //值域范围
                dataRange: this.dataRangeStyle(),
                series: [
                    {
                        //是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
                        roam: true,
                        name: '中国',
                        type: 'map',
                        //地图类型，支持world，china及全国34个省市自治区
                        map: 'china',
                        zoom: 1.2,
                        mapLocation: { x: 'center', y: 'center' },
                        label: {
                            // 显示标签
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        itemStyle: {
                            // 地图省份的背景颜色
                            areaColor: "rgba(20, 41, 87,0.6)",
                            borderColor: "#195BB9",
                            borderWidth: 1,
                            padding: 10,
                            // 选中样式
                            emphasis: {
                                areaColor: "#3199cf",
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            }
                        },

                        data: this.data
                    }
                ]
            })

            //  隐藏loading
            myChart.hideLoading();

            // 屏幕大小发生变化时，重绘地图
            window.onresize = myChart.resize;
        },
        // 值域范围
        dataRangeStyle() {
            let MAX = 10000
            let step = 8
            let low = Math.floor(MAX / 3)
            return {
                orient: "horizontal",
                x: "center",
                min: 0,
                max: MAX,
                splitNumber: step,
                itemGap: 20,
                realtime: true,
                color: ['#0087ff', '#009e42'],
                padding: [0, 10, 0, 10],
                textStyle: { color: "#2a5880" },
                formatter: function (v1, v2) {
                    if (v2 < low) { return '< ' + low }
                    else if (v1 > low * 2) { return '> ' + low * 2 }
                    else { return low + " ~ " + low * 2 }
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped></style>